<template>
  <div class="outpatientConsumptionRecord">
    <mains :title="'门诊充值记录'"></mains>
    <div class="container">
      <div class="header">
    <Space size="large" wrap>

         <DatePicker type="daterange" confirm placement="bottom-end" placeholder="请选择日期~请选择日期" style="width: 200px" />
    </Space>
        <!--         
        <Select v-model="model" style="width: 200px" margin-left="20px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{
            item.label
          }}</Option>
        </Select> -->

        <Input search enter-button="搜索" placeholder="请输入病人姓名/住院号" />
      </div>
      <Table ref="selection" :columns="columns" :data="data">
        <template #action="{ row, index }">
          <!-- <i class="ivu-icon ios-list-box" @click="show(index)"></i> -->
          <Icon type="ios-list-box" color="#006EFF" @click="show(index)"></Icon>
        </template>
      </Table>
      <pageNation :total="40" :curentPage="4"></pageNation>
    </div>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import pageNation from '@/components/pageNation.vue'
import router from '@/router'
import { ref, reactive, onMounted } from 'vue'

const columns = ref([
  {
    type: 'selection',
    minWidth: 60,
    align: 'center',
    height: '100',
  },
  {
    title: '操作时间',
    key: 'time',
    minWidth: 170,
    align: 'center',
  },
  {
    title: '订单编号',
    key: 'orders',
    minWidth: 170,
    align: 'center',
  },
  {
    title: '患者姓名',
    key: 'name',
    minWidth: 100,
    align: 'center',
  },
  {
    title: '就诊卡号',
    key: 'cardnumber',
    minWidth: 140,
    align: 'center',
  },
  {
    title: '来源',
    key: 'source',
    minWidth: 120,
    align: 'center',
  },
  {
    title: '业务类型',
    key: 'bussnesstype',
    minWidth: 100,
    align: 'center',
  },
  // {
  //   title: '费用类型',
  //   key: 'expensetype',
  //   minWidth: 100,
  //   align: 'center',
  // },
  {
    title: '支付方式',
    key: 'pay',
    minWidth: 100,
    align: 'center',
  },
  {
    title: '支付金额',
    key: 'amount',
    minWidth: 100,
    align: 'center',
  },
  {
    title: '支付状态',
    key: 'state',
    minWidth: 100,
    align: 'center',
  },
  {
    title: '卡内余额（元）',
    key: 'balance',
    minWidth: 130,
    align: 'center',
  },
  {
    title: 'Action',
    slot: 'action',
    minWidth: 100,
    align: 'center',
  },
])
const data = ref([
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
  {
    time: '2019-08-15 14:02:26',
    orders: 'JF2020081900098',
    name: '王敏',
    cardnumber: '5000909000',
    source: '微信小程序',
    bussnesstype: '门诊缴费',
    // expensetype: '西药费',
    pay: '微信',
    amount: '60.00',
    state: '已支付',
    balance: '800.00',
  },
])

const cityList = ref([
  { value: '北京', label: '北京' },
  { value: '上海', label: '上海' },
])

// const show = (index) => {
//   Modal.info({
//     title: 'User Info',
//     content: `Name：${data.value[index].name}<br>Age：${data.value[index].age}<br>Address：${data.value[index].address}`
//   })
// }
const show = () => {
  router.push('/outpatientPayRecorddetail')
}
</script>

<style scoped lang="scss">
.container {
  width: 96%;
  background-color: #fff;
  padding: 20px;
  margin-left: 20px;
  // margin: 20px;
  .header {
    margin-bottom: 20px;
    display: flex;
    // 搜索框
    :deep(.ivu-input-group) {
      width: 200px;
      margin-left: 20px;
    }
    :deep(.ivu-input) {
      width: 200px;
    }
  }
  :deep(.ivu-table-row) {
    height: 70px;
  }
  // select
  :deep(.ivu-select-selection) {
    margin-left: 10px;
  }

    :deep(td.ivu-table-column-center, th.ivu-table-column-center):nth-child(10) {
    color: #2ED477;
  }
}
</style>
